<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
	<div class="content-wrapper" th:fragment="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-header">
			<div class="container-fluid">
				<div class="row mb-2">
					<div class="col-sm-6">
						<h1 class="m-0 text-dark">总览</h1>
					</div>
					<!-- /.col -->
					<div class="col-sm-6">
						<ol class="breadcrumb float-sm-right">
							<li class="breadcrumb-item"><a href="#">Home</a></li>
							<li class="breadcrumb-item active">总览</li>
						</ol>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.container-fluid -->
		</div>
		<!-- /.content-header -->

		<!-- Main content -->
		<div class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-6">
						<div class="card">
							<div class="card-header no-border">
								<div class="d-flex justify-content-between">
									<h3 class="card-title">周統計</h3>
									<a href="javascript:void(0);">View Report</a>
								</div>
							</div>
							<div class="card-body">
								<div class="d-flex">
									<p class="ml-auto d-flex flex-column text-right">
										<span class="text-success"> <i class="fa fa-arrow-up"></i>
											12.5%
										</span> <span class="text-muted">和上周相比</span>
									</p>
								</div>
								<!-- /.d-flex -->

								<div class="position-relative mb-4">
									<canvas id="visitors-chart" height="200"></canvas>
								</div>

								<div class="d-flex flex-row justify-content-end">
									<span class="mr-2"> <i class="fa fa-square text-primary"></i>
										this week
									</span> <span> <i class="fa fa-square text-gray"></i> last week
									</span>
								</div>
							</div>
						</div>
						<!-- /.card -->

						<div class="card">
							<div class="card-header no-border">
								<h3 class="card-title">分系统故障率</h3>
								<div class="card-tools">
									<a href="#" class="btn btn-tool btn-sm"> <i
										class="fa fa-download"></i>
									</a> <a href="#" class="btn btn-tool btn-sm"> <i
										class="fa fa-bars"></i>
									</a>
								</div>
							</div>
							<div class="card-body p-0">
								<table class="table table-striped table-valign-middle">
									<thead>
										<tr>
											<th>项目名</th>
											<th>上月故障率</th>
											<th>此月故障率</th>
											<th>更多</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><img th:src="@{~/img/headIcon/user.jpg}" 
												alt="Product 1" class="img-circle img-size-32 mr-2"></img>
												安徽省影像云</td>
											<td>5 %</td>
											<td><small class="text-warning mr-1"> <i
													class="fa fa-arrow-up"></i> 10%
											</small> 5.5 %</td>
											<td><a href="#" class="text-muted"> <i
													class="fa fa-search"></i>
											</a></td>
										</tr>
										<tr>
											<td><img th:src="@{~/img/headIcon/user2.jpg}" 
												alt="Product 1" class="img-circle img-size-32 mr-2"></img>
												安徽省影联网</td>
											<td>4%</td>
											<td><small class="text-success mr-1"> <i 
													class="fa fa-arrow-down"></i> 25%
											</small> 3%</td>
											<td><a href="#" class="text-muted"> <i
													class="fa fa-search"></i>
											</a></td>
										</tr>
										<tr>
											<td><img th:src="@{~/img/headIcon/user3.jpg}" 
												alt="Product 1" class="img-circle img-size-32 mr-2"></img>
												省中医智业平台</td>
											<td>3%</td>
											<td><small class="text-success mr-1"> <i
													class="fa fa-arrow-down"></i> 10%
											</small> 2.7%</td>
											<td><a href="#" class="text-muted"> <i
													class="fa fa-search"></i>
											</a></td>
										</tr>
										<tr>
											<td><img th:src="@{~/img/headIcon/user4.jpg}" 
												alt="Product 1" class="img-circle img-size-32 mr-2"></img>
												肺结核智能平台 <span class="badge bg-danger">NEW</span></td>
											<td>2%</td>
											<td><small class="text-danger mr-1"> <i
													class="fa fa-arrow-up"></i> 25%
											</small> 2.5%</td>
											<td><a href="#" class="text-muted"> <i
													class="fa fa-search"></i>
											</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<!-- /.card -->
					</div>
					<!-- /.col-md-6 -->
					<div class="col-lg-6">
						<div class="card">
							<div class="card-header no-border">
								<div class="d-flex justify-content-between">
									<h3 class="card-title">年度统计</h3>
									<a href="javascript:void(0);">View Report</a>
								</div>
							</div>
							<div class="card-body">
								<div class="d-flex">
									<!-- 	<p class="d-flex flex-column">
										<span class="text-bold text-lg">形势大好</span>
									</p> -->
									<p class="ml-auto d-flex flex-column text-right">
										<span class="text-success"> <i class="fa fa-arrow-up"></i>
											33.1%
										</span> <span class="text-muted">同比上涨</span>
									</p>
								</div>
								<!-- /.d-flex -->

								<div class="position-relative mb-4">
									<canvas id="sales-chart" height="200"></canvas>
								</div>

								<div class="d-flex flex-row justify-content-end">
									<span class="mr-2"> <i class="fa fa-square text-primary"></i>
										This year
									</span> <span> <i class="fa fa-square text-gray"></i> Last year
									</span>
								</div>
							</div>
						</div>
						<!-- /.card -->

						<div class="card">
							<div class="card-header no-border">
								<h3 class="card-title">任務進度</h3>
								<div class="card-tools">
									<a href="#" class="btn btn-sm btn-tool"> <i
										class="fa fa-download"></i>
									</a> <a href="#" class="btn btn-sm btn-tool"> <i
										class="fa fa-bars"></i>
									</a>
								</div>
							</div>
							<div class="card-body">
								<p class="text-center">
									<strong>最近開啟的項目</strong>
								</p>

								<div class="progress-group">
									蚌埠集成平台 <span class="float-right"><b>80</b>/100 %</span>
									<div class="progress progress-sm">
										<div class="progress-bar bg-success" style="width: 80%"></div>
									</div>
								</div>
								<!-- /.progress-group -->

								<div class="progress-group">
									蕪湖集成平台 <span class="float-right"><b>75</b>/100 %</span>
									<div class="progress progress-sm">
										<div class="progress-bar bg-success" style="width: 75%"></div>
									</div>
								</div>

								<!-- /.progress-group -->
								<div class="progress-group">
									<span class="progress-text">宿州集成平台</span> <span
										class="float-right"><b>60</b>/100 %</span>
									<div class="progress progress-sm">
										<div class="progress-bar bg-primary" style="width: 60%"></div>
									</div>
								</div>

								<!-- /.progress-group -->
								<div class="progress-group">
									安醫附院集成平台 <span class="float-right"><b>50</b>/100 %</span>
									<div class="progress progress-sm">
										<div class="progress-bar bg-warning" style="width: 50%"></div>
									</div>
								</div>
								<!-- /.progress-group -->
								<div class="progress-group">
									hadoop 培訓 <span class="float-right"><b>30</b>/100 %</span>
									<div class="progress progress-sm">
										<div class="progress-bar bg-danger" style="width: 30%"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /.row -->
			</div>
			<!-- /.container-fluid -->
		</div>
		<!-- /.content -->
	</div>
	<!-- /.content-wrapper -->
</body>
</html>